<template>
  <div class="box">
    <aside class="menu menu-fold">
      <vue-scroll :ops="scrollOps">
        <h5><i class="circle"></i><span>技术分析</span></h5>
        <ul class="menu-list">
          <li v-for="(item, index) in menuList" :key="index"
            :title="item.name"
            :class="{active: curType===index}"
            :style="item.style"
            @click="handleChangeType(index)">
            <div :class="['logo', 'iconfont', item.icon]"></div>
            <span>{{item.name}}</span>
          </li>
        </ul>
      </vue-scroll>
    </aside>
    <div class="main">
      <!-- 检索 -->
      <div class="s-box">
        <div class="search-box">
          <el-input
            placeholder="请输入关键词"
            v-model="opts.searchTxt"
            class="search-inp"
            @keydown.enter.native="handleSearch"
          >
            <span slot="prefix" class="el-icon-search search-btn"></span>
          </el-input>
          <el-button type="primary" class="search-btn2" @click="handleSearch">检索</el-button>
        </div>
        <p class="report-btn" :class="{disabled: downloading}" @click="downloadReport">
          <i v-show="downloading" class="el-icon-loading"></i>
          <span>一键报告</span>
        </p>
      </div>
      <!-- 技术趋势分析 -->
      <Trends ref="trends" v-if="curType===0"/>
      <!-- 专利申请人排名 -->
      <Applicant ref="applicant" v-if="curType===1"/>
      <!-- 专利发明人排名 -->
      <Inventor ref="inventor" v-if="curType===2"/>
      <!-- 地域技术分布分析 -->
      <Regional ref="regional" v-if="curType===3"/>
      <!-- 技术领域分类分析 -->
      <Technical ref="technical" v-if="curType===4"/>
    </div>
  </div>
</template>

<script>
import Trends from './Trends'
import Applicant from './Applicant'
import Inventor from './Inventor'
import Regional from './Regional'
import Technical from './Technical'
import {getDate} from '@/utils/utils'
export default {
  components: {
    Trends,
    Applicant,
    Inventor,
    Regional,
    Technical
  },
  data() {
    return {
      menuList: [],
      curType: -1,
      opts: {
        searchTxt: '太阳能电池',
        ipi: 1,
        ips: 10,
        sort: -1, // 排序  1 倒序 DESC ，2 正序 ASC
      },
      scrollOps: {
        vuescroll: {
          mode: 'native'
        },
        scrollPanel: {
          initialScrollX: false,
          initialScrollY: false,
          scrollingX: false,
          scrollingY: true,
        },
        rail: {
          background: 'rgba(255,255,255,.1)',
          gutterOfEnds: '10px'
        },
        bar: {
          background: '#eee',
          size: '5px'
        }
      },
      downloading: false
    }
  },
  mounted() {
    let query = this.$route.query
    if (query && query.model) {
      this.curType = Number(query.model)
    } else {
      this.curType = 0
    }
    this.opts.searchTxt = query.name || this.opts.searchTxt;
    this.init()
  },
  methods: {
    init() {
      this.menuList = [
        {name: '技术趋势分析', icon: 'icon-hangyedongtai'},
        {name: '专利申请人排名', icon: 'icon-hangyedongtai'},
        {name: '专利发明人排名', icon: 'icon-hangyedongtai'},
        {name: '地域技术分布分析', icon: 'icon-hangyedongtai'},
        {name: '技术领域分类分析', icon: 'icon-hangyedongtai'},
      ]
      this.initPanel()
    },
    initPanel() {
      this.$nextTick(() => {
        if (this.$refs.trends) this.$refs.trends.init(this.opts)
        if (this.$refs.applicant) this.$refs.applicant.init(this.opts)
        if (this.$refs.inventor) this.$refs.inventor.init(this.opts)
        if (this.$refs.regional) this.$refs.regional.init(this.opts)
        if (this.$refs.technical) this.$refs.technical.init(this.opts)
        
      })
    },
    handleSearch() {
      this.initPanel()
    },
    handleChangeType(index) {
      this.curType = index
      this.$router.push({
        name: this.$route.name,
        query: {
          model: this.curType
        }
      })
      this.initPanel()
    },
    // 报告下载
    downloadReport() {
      if (this.downloading) {
        return
      }
      this.downloading = true
      let {startDate, endDate} = getDate(10)
      this.$post(this.$Url.report.analysisReport, {
        '21': {
          keyword: this.opts.searchTxt,
          start: startDate,
          end: endDate
        },
        '22': {
          keyword: this.opts.searchTxt,
          limit: 10,
          start: startDate,
          end: endDate
        },
        '31': {
          keyword: this.opts.searchTxt,
          limit: 10,
          country: '',
          agg: 'an',
          start: startDate,
          end: endDate
        },
        '32': {
          keyword: this.opts.searchTxt,
          limit: 10,
          country: 'CN',
          agg: 'an',
          start: startDate,
          end: endDate
        },
        '41': {
          keyword: this.opts.searchTxt,
          limit: 10,
          country: '',
          agg: 'in',
          start: startDate,
          end: endDate
        },
        '42': {
          keyword: this.opts.searchTxt,
          limit: 10,
          country: 'CN',
          agg: 'in',
          start: startDate,
          end: endDate
        },
        '51': {
          keyword: this.opts.searchTxt,
          limit: 10,
          country: '',
          start: startDate,
          end: endDate
        },
        '52': {
          keyword: this.opts.searchTxt,
          limit: 10,
          country: 'CN',
          start: startDate,
          end: endDate
        },
        keyword: this.opts.searchTxt,
        type: 1, // 1代表科技分析报告
      }).then(res => {
        if (res.status === 200) {
          this.downloading = false
          this.$alert("报告生成中，请进入报告下载页面进行查看和下载。", '成功', {
            confirmButtonText: '确定',
            callback: action => {}
          })
        }
      }).catch(err => {})
    }
  },

}
</script>

<style lang="scss" scoped>
.box {
  position: relative;
  display: flex;
  min-height: calc(100vh - .7rem);
  padding: .24rem .28rem .24rem 2.4rem;
  box-sizing: border-box;
  background-color: $color46;
  .menu {
    position: fixed;
    top: .7rem;
    left: 0;
    z-index: 3;
    width: 1.02rem;
    height: calc(100vh - .7rem);
    padding-top: .16rem;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    background-color: $color2;
    overflow-x: hidden;
    overflow-y: auto;
    transition: all .2s linear;
    // 展开
    // &:hover 
    &.menu-fold {
      width: 2.2rem;
      h5 {
        .circle, span {
          display: inline-block;
        }
      }
      .menu-list {
        li {
          padding: 0 .18rem 0 .54rem;
          .logo {
            position: absolute;
            top: 50%;
            left: .1rem;
            margin-top: -.18rem;
          }
          span {
            display: inline-block;
          }
        }
      }
    }
    h5 {
      width: 2.2rem;
      height: .4rem;
      line-height: .4rem;
      margin-bottom: .1rem;
      // font-family: SourceHanSansCN-Bold;
      font-size: .16rem;
      font-weight: normal;
      text-align: center;
      text-indent: -.09rem;
      color: $color47;
      .circle {
        position: relative;
        display: none;
        width: .16rem;
        height: .1rem;
        margin-right: .18rem;
        vertical-align: middle;
        &:before {
          position: absolute;
          top: 0;
          left: 0;
          z-index: 2;
          width: .1rem;
          height: .1rem;
          border-radius: 50%;
          background-color: $mainColor;
          content: '';
        }
        &:after {
          position: absolute;
          top: 0;
          right: 0;
          z-index: 1;
          width: .1rem;
          height: .1rem;
          border-radius: 50%;
          background-color: $color48;
          content: '';
        }
      }
      span {
        display: none;
        vertical-align: middle;
      }
    }
    .menu-list {
      position: relative;
      padding: 0 .1rem;
      li {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: .6rem;
        line-height: .6rem;
        // padding: 0 .18rem 0 .66rem;
        padding: 0 .1rem;
        margin-bottom: .1rem;
        cursor: pointer;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        transition: all .2s ease;
        &:last-of-type {
          margin-bottom: .1rem;
        }
        &:hover {
          border-radius: 8px;
          box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
          background-color: $color2;
        }
        &.active {
          border-radius: 8px;
          box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
          background-color: $color2;
          .logo {
            color: $color68;
            background-color: $mainColor;
          }
          span {
            &:nth-of-type(1), &:nth-of-type(2) {
              color: $mainColor;
            }
          }
        }
        .logo {
          position: relative;
          top: auto;
          left: 0;
          margin-top: 0;
          display: flex;
          align-items: center;
          justify-content: center;
          width: .36rem;
          height: .36rem;
          border-radius: 8px;
          // margin-top: -.18rem;
          font-size: .22rem;
          font-weight: normal;
          color: $mainColor;
          // background-color: $color68;
        }
        span {
          display: none;
          &:nth-of-type(1) {
            width: .36rem;
            // font-family: SourceHanSansCN-Medium;
            font-weight: normal;
            font-size: .15rem;
            color: $color69;
          }
          // &:nth-of-type(2) {
          //   width: calc(100% - .36rem - .15rem - .36rem);
          //   font-size: .14rem;
          //   text-align: right;
          //   color: $color70;
          // }
        }
      }
    }
    .menu-icon-box {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: .4rem;
      i {
        font-size: .24rem;
        color: $color5;
        cursor: pointer;
      }
    }
  }
  .main {
    position: relative;
    width: 100%;
    .s-box {
      position: relative;
      margin-bottom: .24rem;
      .search-box {
        position: relative;
        display: flex;
        align-items: center;
        .search-inp {
          width: 50%;
          max-width: 7.7rem;
          height: .4rem;
          margin-right: .14rem;
          vertical-align: middle;
          background-color: $color2;
          ::v-deep {
            ::placeholder {
              color: $color49 !important;
              // color: red !important;
            }
            .el-input__inner {
              height: .4rem;
              line-height: .4rem;
              padding-left: .79rem;
              padding-right: .15rem;
              border-color: $mainColor;
              border-radius: 6px;
              // font-family: SourceHanSansCN-Regular;
              font-size: .14rem;
              color: $color49;
              background-color: transparent;
            }
            .el-input__prefix {
              position: absolute;
              top: 0;
              left: 0;
              width: .64rem;
              line-height: .4rem;
              font-size: .18rem;
              color: $mainColor;
              &:after {
                position: absolute;
                top: 50%;
                right: 0;
                width: 1px;
                height: .32rem;
                margin-top: -.16rem;
                background-color: $color50;
                content: '';
              }
            }
            .el-input__prefix2 {
              position: relative;
              width: .64rem;
              padding: 0;
              border-color: $mainColor;
              border-top-right-radius: 6px;
              border-bottom-right-radius: 6px;
              box-sizing: border-box;
              text-align: center;
              background-color: transparent;
              // cursor: pointer;
              .search-btn {
                display: block;
                width: 100%;
                text-align: center;
                font-size: .14rem;
                font-weight: bold;
                color: $mainColor;
                cursor: pointer;
              }
            }
          }
        }
        .search-btn2 {
          width: .96rem;
          height: .4rem;
          padding: 0;
          border-color: $mainColor;
          border-radius: 6px;
          box-sizing: border-box;
          // font-family: SourceHanSansCN-Regular;
          font-size: .16rem;
          font-weight: bold;
          letter-spacing: 1px;
          color: $color17;
          vertical-align: middle;
          background-color: $mainColor;
          &:hover {
            background-color: rgba(47,65,200,.8);
          }
        }
        .advanced-search-btn {
          position: absolute;
          bottom: 10px;
          right: -110px;
          width: 100px;
          line-height: 24px;
          text-align: center;
          font-size: 15px;
          cursor: pointer;
          &:hover {
            text-decoration: underline;
            color: $mainColor;
          }
        }
      }
      .report-btn {
        position: absolute;
        top: .06rem;
        right: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        // width: 1rem;
        // height: .32rem;
        height: .36rem;
        // line-height: .32rem;
        padding: 0 .3rem;
        border-radius: 4px;
        text-align: center;
        font-size: .15rem;
        color: $color2;
        background-color: $mainColor;
        cursor: pointer;
        &.disabled {
          background-color: rgba(47,65,200,.6);
          &:hover {
            background-color: rgba(47,65,200,.6);
          }
        }
        &.gray {
          background-color: #bbb;
          &:hover {
            background-color: #bbb;
          }
        }
        &:hover {
          background-color: rgba(47,65,200,.8);
        }
        i {
          font-size: .17rem;
        }
      }
    }
  }
}
</style>